<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../Pear-Admin-Layui/component/pear/css/pear.css"/>
</head>
<style>
  body {
    background-color: #F2F2F2;
  }
</style>
<body>

<div class="layui-row layui-col-space10" style="padding: 10px">
  <div class="layui-col-md6">
    <div class="layui-card">
      <div class="layui-card-body">
        <div id="column1" style="min-height:400px;"></div>
      </div>
    </div>
  </div>
  <div class="layui-col-md6">
    <div class="layui-card">
      <div class="layui-card-body">
        <div id="column2" style="min-height:400px;"></div>
      </div>
    </div>
  </div>
  <div class="layui-col-md6">
    <div class="layui-card">
      <div class="layui-card-body">
        <div id="column3" style="min-height:400px;"></div>
      </div>
    </div>
  </div>
  <div class="layui-col-md6">
    <div class="layui-card">
      <div class="layui-card-body">
        <div id="column4" style="min-height:400px;"></div>
      </div>
    </div>
  </div>
</div>
<script src="../Pear-Admin-Layui/component/layui/layui.js"></script>
<script src="../Pear-Admin-Layui/component/pear/pear.js"></script>
<script>
  layui.use(['echarts','jquery'], function () {
    let echarts = layui.echarts;
    let $ = layui.jquery;


    var column1 = echarts.init(document.getElementById('column1'));
    var column2 = echarts.init(document.getElementById('column2'));
    var column3 = echarts.init(document.getElementById('column3'));
    var column4 = echarts.init(document.getElementById('column4'));
    $.ajax({
      url: "/chart/data",
      dataType: 'json',
      type: 'get',
      success: function (res) {
        f1(res.data.week);
        f2(res.data.month);
        f3(res.data.year);
        f4(res.data.all);


      }
    })

    function f1(data) {
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' ,
            textStyle: {
              color: '#fff',
              fontSize: '26'
            },
          }
        },
        legend: {
          top:'5%',
          right:'10%',
          data: ['猕猴桃', '香蕉'],
          textStyle:{
            fontSize:12,
            color:'#808080'
          },
          icon:'rect'
        },
        grid: {
          top:60,
          left:50,
          bottom:60,
          right:60
        },
        xAxis: [{
          type: 'category',
          axisTick:{
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#4D4D4D',
            fontSize:14,
            interval:0,
            rotate:40,
            fontWeight:'bold'
          },
          data: data.x,

        }],
        yAxis: [{
          name:'本周',
          nameTextStyle:{
            color:'#808080',
            fontSize:12,
            padding:[0, 0, 0, -5]
          },
          max: function(value) {
            if(value.max<5){
              return 5
            }else{
              return value.max
            }
          },
          type: 'value',
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#808080',
            fontSize:12,
            margin:5
          },
          splitLine:{
            show:false
          },
          axisTick:{
            show:false
          }
        }],
        series: [

          {

            type: 'bar',
            label:{
              show:true,
              position:'top',
              fontSize:14,
              color:'#3D8BF0',
              fontWeight:'bold'
            },
            barMaxWidth:60,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#3D8BF0' // 0% 处的颜色
                }, {
                  offset: 1, color: '#CCE2FF' // 100% 处的颜色
                }]
              }
            },
            data: data.y
          }
        ]
      };
      column1.setOption(option);
    }
    function f2(data) {
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' ,
            textStyle: {
              color: '#fff',
              fontSize: '26'
            },
          }
        },
        legend: {
          top:'5%',
          right:'10%',
          data: ['猕猴桃', '香蕉'],
          textStyle:{
            fontSize:12,
            color:'#808080'
          },
          icon:'rect'
        },
        grid: {
          top:60,
          left:50,
          bottom:60,
          right:60
        },
        xAxis: [{
          type: 'category',
          axisTick:{
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#4D4D4D',
            fontSize:14,
            interval:0,
            rotate:40,
            fontWeight:'bold'
          },
          data: data.x,

        }],
        yAxis: [{
          name:'本月',
          nameTextStyle:{
            color:'#808080',
            fontSize:12,
            padding:[0, 0, 0, -5]
          },
          max: function(value) {
            if(value.max<5){
              return 5
            }else{
              return value.max
            }
          },
          type: 'value',
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#808080',
            fontSize:12,
            margin:5
          },
          splitLine:{
            show:false
          },
          axisTick:{
            show:false
          }
        }],
        series: [

          {

            type: 'bar',
            label:{
              show:true,
              position:'top',
              fontSize:14,
              color:'#ebb563',
              fontWeight:'bold'
            },
            barMaxWidth:60,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#ebb563' // 0% 处的颜色
                }, {
                  offset: 1, color: '#eae0d2' // 100% 处的颜色
                }]
              }
            },
            data: data.y
          }
        ]
      };

      column2.setOption(option);
    }
    function f3(data) {
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' ,
            textStyle: {
              color: '#fff',
              fontSize: '26'
            },
          }
        },
        legend: {
          top:'5%',
          right:'10%',
          data: ['猕猴桃', '香蕉'],
          textStyle:{
            fontSize:12,
            color:'#808080'
          },
          icon:'rect'
        },
        grid: {
          top:60,
          left:50,
          bottom:60,
          right:60
        },
        xAxis: [{
          type: 'category',
          axisTick:{
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#4D4D4D',
            fontSize:14,
            interval:0,
            rotate:40,
            fontWeight:'bold'
          },
          data: data.x,

        }],
        yAxis: [{
          name:'本年',
          nameTextStyle:{
            color:'#808080',
            fontSize:12,
            padding:[0, 0, 0, -5]
          },
          max: function(value) {
            if(value.max<5){
              return 5
            }else{
              return value.max
            }
          },
          type: 'value',
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#808080',
            fontSize:12,
            margin:5
          },
          splitLine:{
            show:false
          },
          axisTick:{
            show:false
          }
        }],
        series: [

          {

            type: 'bar',
            label:{
              show:true,
              position:'top',
              fontSize:14,
              color:'#f78989',
              fontWeight:'bold'
            },
            barMaxWidth:60,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f78989' // 0% 处的颜色
                }, {
                  offset: 1, color: '#efdede' // 100% 处的颜色
                }]
              }
            },
            data: data.y
          }
        ]
      };

      column3.setOption(option);
    }
    function f4(data) {
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' ,
            textStyle: {
              color: '#fff',
              fontSize: '26'
            },
          }
        },
        legend: {
          top:'5%',
          right:'10%',
          data: ['猕猴桃', '香蕉'],
          textStyle:{
            fontSize:12,
            color:'#808080'
          },
          icon:'rect'
        },
        grid: {
          top:60,
          left:50,
          bottom:60,
          right:60
        },
        xAxis: [{
          type: 'category',
          axisTick:{
            show:false
          },
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#4D4D4D',
            fontSize:14,
            interval:0,
            rotate:40,
            fontWeight:'bold'
          },
          data: data.x,

        }],
        yAxis: [{
          name:'所有',
          nameTextStyle:{
            color:'#808080',
            fontSize:12,
            padding:[0, 0, 0, -5]
          },
          max: function(value) {
            if(value.max<5){
              return 5
            }else{
              return value.max
            }
          },
          type: 'value',
          axisLine:{
            show:false
          },
          axisLabel:{
            color:'#808080',
            fontSize:12,
            margin:5
          },
          splitLine:{
            show:false
          },
          axisTick:{
            show:false
          }
        }],
        series: [

          {

            type: 'bar',
            label:{
              show:true,
              position:'top',
              fontSize:14,
              color:'#67c23a',
              fontWeight:'bold'
            },
            barMaxWidth:60,
            itemStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#67c23a' // 0% 处的颜色
                }, {
                  offset: 1, color: '#c2eabb' // 100% 处的颜色
                }]
              }
            },
            data: data.y
          }
        ]
      };

      column4.setOption(option);
    }


  })
</script>
</body>
</html>